{% extends "base/nav.html" %}
{% load static %}
{% load my_tags_filters %}
{% block title %}{{ category.name }} - 旅游舆情监测{% endblock %}

{% block css %}
    <style>
        .category-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
            border-radius: 0 0 20px 20px;
        }

        .attraction-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            overflow: hidden;
            margin-bottom: 2rem;
            height: 100%;
        }

        .attraction-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
        }

        .card-img-top {
            height: 200px;
            object-fit: cover;
            width: 100%;
        }

        .sentiment-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1;
        }

        .heat-indicator {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-size: 0.8rem;
        }

        .stats-item {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .stats-item i {
            width: 20px;
            margin-right: 8px;
            color: #6c757d;
        }

        .progress {
            height: 8px;
            margin-bottom: 0.5rem;
        }

        .category-sidebar {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 2rem;
        }

        .category-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .category-list li {
            margin-bottom: 0.5rem;
        }

        .category-list a {
            display: block;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            color: #333;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .category-list a:hover,
        .category-list a.active {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: #6c757d;
        }

        .empty-state i {
            font-size: 4rem;
            margin-bottom: 1rem;
            color: #dee2e6;
        }

        .pagination {
            justify-content: center;
            margin-top: 2rem;
        }

        .page-link {
            border: none;
            color: #667eea;
            padding: 0.5rem 1rem;
            margin: 0 0.2rem;
            border-radius: 8px;
        }

        .page-item.active .page-link {
            background: linear-gradient(135deg, #667eea, #764ba2);
            border: none;
        }

        .page-link:hover {
            background-color: #f8f9fa;
            color: #764ba2;
        }
    </style>
{% endblock %}

{% block content %}
    <!-- 分类头部 -->
    <div class="category-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center bg-transparent">
                            <li class="breadcrumb-item"><a href="{% url 'main:attraction_list' %}"
                                                           class="text-white">首页</a></li>
                            <li class="breadcrumb-item"><a href="{% url 'main:attraction_list' %}" class="text-white">景点分类</a>
                            </li>
                            <li class="breadcrumb-item active text-white" aria-current="page">{{ category.name }}</li>
                        </ol>
                    </nav>

                    <h1 class="display-4 mb-3">{{ category.name }}</h1>
                    {% if category.description %}
                        <p class="lead mb-0">{{ category.description }}</p>
                    {% endif %}

                    <div class="mt-3">
                    <span class="badge bg-light text-dark fs-6">
                        <i class="fas fa-map-marker-alt me-1"></i>
                        共 {{ attractions.paginator.count }} 个景点
                    </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-lg-3">
                <div class="category-sidebar">
                    <h5 class="mb-3"><i class="fas fa-folder-tree me-2"></i>全部分类</h5>
                    <ul class="category-list">
                        <li>
                            <a href="{% url 'main:attraction_list' %}"
                               {% if not category %}class="active"{% endif %}>
                                <i class="fas fa-all me-2"></i>全部分类
                            </a>
                        </li>
                        {% for cat in categories %}
                            <li>
                                <a href="{% url 'main:attraction_by_category' cat.id %}"
                                   {% if cat.id == category.id %}class="active"{% endif %}>
                                    <i class="fas fa-folder me-2"></i>{{ cat.name }}
                                    <small class="float-end text-muted">{{ cat.touristattraction_set.count }}</small>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

                <!-- 分类统计 -->
                <div class="category-sidebar">
                    <h5 class="mb-3"><i class="fas fa-chart-bar me-2"></i>分类统计</h5>

                    <div class="stats-item">
                        <i class="fas fa-mountain"></i>
                        <span>景点总数: <strong>{{ attractions.paginator.count }}</strong></span>
                    </div>

                    <div class="stats-item">
                        <i class="fas fa-fire"></i>
                        <span>平均热度: <strong>
            {{ attractions|avg_heat_index|floatformat:1 }}
        </strong></span>
                    </div>

                    <div class="stats-item">
                        <i class="fas fa-comments"></i>
                        <span>总评论数: <strong>
            {{ attractions|sum_review_count }}
        </strong></span>
                    </div>
                </div>
            </div>

            <!-- 景点列表 -->
            <div class="col-lg-9">
                {% if attractions %}
                    <div class="row">
                        {% for attraction in attractions %}
                            <div class="col-md-6 col-lg-4">
                                <div class="card attraction-card">
                                    {% if attraction.main_image %}
                                        <img src="{{ attraction.main_image.url }}" class="card-img-top"
                                             alt="{{ attraction.name }}">
                                    {% else %}
                                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center">
                                            <i class="fas fa-mountain fa-3x text-muted"></i>
                                        </div>
                                    {% endif %}

                                    <!-- 情感标签 -->
                                    <div class="sentiment-badge">
                                <span class="badge 
                                    {% if attraction.avg_sentiment_score > 0.1 %}bg-success
                                    {% elif attraction.avg_sentiment_score < -0.1 %}bg-danger
                                    {% else %}bg-warning{% endif %}">
                                    {% if attraction.avg_sentiment_score > 0.1 %}正面
                                    {% elif attraction.avg_sentiment_score < -0.1 %}负面
                                    {% else %}中性{% endif %}
                                </span>
                                    </div>

                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <a href="{% url 'main:attraction_detail' attraction.pk %}"
                                               class="text-decoration-none text-dark">
                                                {{ attraction.name }}
                                            </a>
                                        </h5>

                                        <p class="card-text text-muted small">
                                            <i class="fas fa-map-marker-alt me-1"></i>
                                            {{ attraction.location }}
                                        </p>

                                        <div class="attraction-stats">
                                            <!-- 热度 -->
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <small class="text-muted">热度指数</small>
                                                <span class="heat-indicator">{{ attraction.heat_index }}</span>
                                            </div>

                                            <!-- 情感分布 -->
                                            <div class="mb-2">
                                                <small class="text-muted d-block mb-1">情感分布</small>
                                                <div class="progress">
                                                    <div class="progress-bar bg-success"
                                                         style="width: {% widthratio attraction.positive_count attraction.review_count 100 %}%"></div>
                                                    <div class="progress-bar bg-warning"
                                                         style="width: {% widthratio attraction.neutral_count attraction.review_count 100 %}%"></div>
                                                    <div class="progress-bar bg-danger"
                                                         style="width: {% widthratio attraction.negative_count attraction.review_count 100 %}%"></div>
                                                </div>
                                                <div class="d-flex justify-content-between small text-muted">
                                                    <span>正 {{ attraction.positive_count }}</span>
                                                    <span>中 {{ attraction.neutral_count }}</span>
                                                    <span>负 {{ attraction.negative_count }}</span>
                                                </div>
                                            </div>

                                            <!-- 其他统计 -->
                                            <div class="d-flex justify-content-between small text-muted">
                                        <span>
                                            <i class="fas fa-comment me-1"></i>
                                            {{ attraction.review_count }}
                                        </span>
                                                <span>
                                            <i class="fas fa-star me-1 text-warning"></i>
                                            {{ attraction.avg_sentiment_score|floatformat:1 }}
                                        </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-footer bg-transparent">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <small class="text-muted">
                                                {{ attraction.created_at|date:"Y-m-d" }}
                                            </small>
                                            <a href="{% url 'main:attraction_detail' attraction.pk %}"
                                               class="btn btn-sm btn-outline-primary">
                                                查看详情
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>

                    <!-- 分页 -->
                    {% if attractions.has_other_pages %}
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                {% if attractions.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ attractions.previous_page_number }}"
                                           aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                {% endif %}

                                {% for num in attractions.paginator.page_range %}
                                    {% if attractions.number == num %}
                                        <li class="page-item active">
                                            <span class="page-link">{{ num }}</span>
                                        </li>
                                    {% else %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if attractions.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ attractions.next_page_number }}"
                                           aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    {% endif %}

                {% else %}
                    <!-- 空状态 -->
                    <div class="empty-state">
                        <i class="fas fa-mountain"></i>
                        <h4>暂无景点</h4>
                        <p class="mb-4">该分类下暂时没有景点，去看看其他分类吧</p>
                        <a href="{% url 'main:attraction_list' %}" class="btn btn-primary">
                            <i class="fas fa-home me-2"></i>返回首页
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 卡片悬停效果
            const cards = document.querySelectorAll('.attraction-card');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function () {
                    this.style.transform = 'translateY(-5px)';
                });
                card.addEventListener('mouseleave', function () {
                    this.style.transform = 'translateY(0)';
                });
            });

            // 分类链接激活状态
            const categoryLinks = document.querySelectorAll('.category-list a');
            categoryLinks.forEach(link => {
                link.addEventListener('click', function () {
                    categoryLinks.forEach(l => l.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
{% endblock %}